<template>
  <span class="mac-address">
    <span v-for="(item, index) in mac || ''" :key="index">
      {{ item }}
    </span>
  </span>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'

const showMac = ref('')
const $props = defineProps(['mac'])

watch(
  () => $props.mac,
  (newValue) => {
    showMac.value = newValue
  }
)
</script>

<style lang="scss" scoped>
.mac-address {
  width: 130px;
  min-width: 130px;
  display: flex;
  background-color: pink;

  span {
    flex: 1;
    text-align: center;
  }
}
</style>
